import UserCard from "./UserCard";
import { useState, useEffect } from "react";
import { getUserDetailsInfoApi } from "../../http/module/User/index.js";

export default function UserPage() {
  const [userData, setUserData] = useState({
    username: "加载中...",
    avatar: "https://via.placeholder.com/100",
    totalFans: 0,
    totalFollows: 0,
    totalGetLikes: 0,
    totalQuestions: 0,
    totalAnswers: 0,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await getUserDetailsInfoApi();
        setUserData({
          username: response.data.username,
          avatar: response.data.avatar,
          totalFans: response.data.totalFans,
          totalFollows: response.data.totalFollows,
          totalGetLikes: response.data.totalGetLikes,
          totalQuestions: response.data.totalQuestions || 0,
          totalAnswers: response.data.totalAnswers || 0,
        });
        window.localStorage.setItem("currentUserName", response.data.id);
      } catch (error) {
        console.error("获取用户数据失败:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchUserData();
  }, []);

  return (
    <div className="max-w-6xl mx-auto p-4 md:p-6">
      {/* 响应式容器 */}
      <div className="flex justify-center">
        {/* 响应式宽度：移动端全宽，中等屏幕2/3，大屏幕1/2 */}
        <div className="w-full md:w-2/3 lg:w-1/2">
          {loading ? (
            <div className="text-center p-8">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
              <p className="mt-4 text-gray-600">加载用户信息中...</p>
            </div>
          ) : (
            <UserCard
              user={userData}
              className="shadow-lg rounded-xl overflow-hidden transform transition-all hover:scale-[1.02]"
            />
          )}
        </div>
      </div>
    </div>
  );
}
